export default {
    name: "permissions",
    setup(props, { emit }) {
        // 路由数据示例
		const routes = ref([{
			name: 'getbgsxlist',
			path: '/v1/admin/getbgsxlist',
			method: 'POST',
			roles: ['admin', 'xmgly', 'tby'],
			desc: '获取项目列表'
		}])

		// 加载配置
		const loadConfig = async () => {
			const res = await permissions();
			routes.value = Object.entries(res.Routes).map(([name, config]) => ({Name: name,...config}));
		}

		// 添加新路由
		const addNewRoute = () => {
			routes.value.push({
				Name: '',
				Path: '',
				Method: 'POST',
				Roles: [],
				Desc: ''
			})
		}

		// 删除路由
		const deleteRoute = (index) => {
			routes.value.splice(index, 1)
		}

		// 保存配置
		const saveConfig = async () => {
			const config = {
				routes: routes.value.reduce((acc, cur) => {
					acc[cur.Name] = {
						path: cur.Path,
						method: cur.Method,
						roles: cur.Roles,
						desc: cur.Desc
					}
					return acc
				}, {})
			}
            console.log(config)
            if(window.APP_CONFIG.baseurl == 'https://zp.kzhgzs.cn/') {
                return ElMessage.error('演示站禁止修改');
            }
			await savepermissions(config)
			ElMessage.success('配置保存成功')
		}

		// 重置表单
		const resetForm = () => {
			loadConfig()
		}

		onMounted(() => {
			loadConfig()
		})
		
		//disabled
        return {
            routes,
            loadConfig,
            saveConfig,
            resetForm,
            deleteRoute,
            addNewRoute,
            useroption: {admin: '总管理员', xmgly: '项目管理员', tby: '填报员', shy: '审核员', user: '普通用户'},
        };
    },
    
  template: `
	<div>
		<el-card class="box-card">
			<template #header>
				<div style="display:flex;justify-content: space-between;align-items: center;">
					<span>角色路由权限配置</span>
					<el-button type="primary" @click="addNewRoute">添加路由</el-button>
				</div>
			</template>

			<el-table :data="routes" border style="width: 100%">
				<!-- 路由名称 -->
				<el-table-column prop="Name" label="路由标识" width="160" />

				<!-- 路径 -->
				<el-table-column prop="Path" label="路径" width="250" />

				<!-- 请求方法 -->
				<el-table-column prop="Method" label="方法" width="100" />
				
				<!-- 描述 -->
				<el-table-column prop="Desc" label="描述" width="300">
				<!--	
				    <template #default="{ row }">
						<el-input v-model="row.Desc" type="textarea" autosize></el-input>
					</template>
				-->
				</el-table-column>

				<!-- 允许角色 -->
				<el-table-column prop="roles" label="允许角色">
					<template #default="{ row }">
						<el-select v-model="row.Roles" multiple placeholder="选择角色" style="width: 100%">
							<el-option v-for="role in ['admin', 'xmgly', 'tby', 'shy', 'user']" :key="role" :label="useroption[role]":value="role">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<!-- 操作 -->
				<el-table-column label="操作" width="120">
					<template #default="{ $index }">
						<el-button type="danger" size="small" @click="deleteRoute($index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="footer-actions">
				<el-button type="primary" @click="saveConfig">保存配置</el-button>
				<el-button @click="resetForm">重置</el-button>
			</div>
		</el-card>
	</div>
  `
};